<script setup lang="ts">
// 组件导入可以在这里添加
</script>

<template>
  <div class="flex flex-col w-full bg-default-background">
    <!-- 顶部横幅 -->
    <div class="hero-banner" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')">
      <div class="banner-overlay">
        <header>
          <h1>重新定义产品经理</h1>
        </header>
      </div>
    </div>
    
    <main>
      <!-- 介绍部分 -->
      <section class="intro-section">
        <div class="content-container">
          <span class="section-tag">AI驱动的产品管理</span>
          <h2 class="section-title">变革产品管理的未来</h2>
          <p class="lead">
            产品管理领域正在经历一场巨变。借助量化帮等人工智能工具，传统的产品管理角色正在演变为原型管理。
            这种转变不仅加速了开发速度，也重塑了在新时代蓬勃发展所需的技能。
          </p>
        </div>
      </section>

      <!-- 分隔线 -->
      <div class="divider"></div>

      <!-- 风险管理框架部分 -->
      <section class="risk-section">
        <div class="content-container">
          <h2 class="section-title">产品风险管理框架</h2>
          <p class="section-description">
            产品管理就是平衡关键风险：价值、可用性、可行性和生存力。原型可以帮助团队尽早解决风险，通常是在编写一行代码之前。
          </p>
          
          <div class="card-grid">
            <div class="feature-card">
              <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="价值风险" class="card-image" />
              <div class="card-content">
                <div class="card-icon">
                  <i class="icon">📊</i>
                </div>
                <div class="card-text">
                  <h3>价值风险</h3>
                  <p>客户会买吗？用户会使用吗？</p>
                </div>
              </div>
            </div>
            
            <div class="feature-card">
              <img src="https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="可用性风险" class="card-image" />
              <div class="card-content">
                <div class="card-icon">
                  <i class="icon">👤</i>
                </div>
                <div class="card-text">
                  <h3>可用性风险</h3>
                  <p>用户会弄清楚如何使用它吗？</p>
                </div>
              </div>
            </div>
            
            <div class="feature-card">
              <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2015&q=80" alt="可行性风险" class="card-image" />
              <div class="card-content">
                <div class="card-icon">
                  <i class="icon">🏢</i>
                </div>
                <div class="card-text">
                  <h3>生存力风险</h3>
                  <p>解决方案是否适合我们的业务？</p>
                </div>
              </div>
            </div>
            
            <div class="feature-card">
              <img src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="可行性风险" class="card-image" />
              <div class="card-content">
                <div class="card-icon">
                  <i class="icon">⚙️</i>
                </div>
                <div class="card-text">
                  <h3>可行性风险</h3>
                  <p>我们能否在可用的时间和技能下构建所需的东西？</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 分隔线 -->
      <div class="divider"></div>

      <!-- AI工具部分 -->
      <section class="ai-section">
        <div class="content-container">
          <h2 class="section-title">人工智能工具的革命性作用</h2>
          <p class="section-description">
            像量化帮这样的人工智能工具可以让团队更快地制作原型、整合真实数据并收集有意义的反馈。
            通过先进的AI技术，产品团队可以更高效地解决关键风险。
          </p>
          
          <div class="card-grid">
            <div class="feature-card">
              <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="加速原型设计" class="card-image" />
              <div class="card-content">
                <div class="card-icon">
                  <i class="icon">🚀</i>
                </div>
                <div class="card-text">
                  <h3>加速原型设计</h3>
                  <p>像量化帮这样的人工智能工具可以让团队更快地制作原型，通常是在编写一行代码之前。</p>
                </div>
              </div>
            </div>
            
            <div class="feature-card">
              <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="整合真实数据" class="card-image" />
              <div class="card-content">
                <div class="card-icon">
                  <i class="icon">📊</i>
                </div>
                <div class="card-text">
                  <h3>整合真实数据</h3>
                  <p>AI工具能够帮助团队快速收集和分析数据，提供更准确的决策依据。</p>
                </div>
              </div>
            </div>
            
            <div class="feature-card">
              <img src="https://images.unsplash.com/photo-1527689368864-3a821dbccc34?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="收集有意义的反馈" class="card-image" />
              <div class="card-content">
                <div class="card-icon">
                  <i class="icon">💬</i>
                </div>
                <div class="card-text">
                  <h3>收集有意义的反馈</h3>
                  <p>通过AI辅助的原型，团队可以更早获取用户反馈，降低后期修改成本。</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 分隔线 -->
      <div class="divider"></div>

      <!-- 未来部分 -->
      <section class="future-section">
        <div class="content-container">
          <h2 class="section-title">产品团队的未来</h2>
          <p class="section-description">
          产品经理的角色将更像管弦乐队指挥：确保团队有明确的目标和高效运作，同时在用户体验、工程和业务功能之间无缝协作。
          </p>
          
          <div class="workflow-grid">
            <div class="workflow-card">
              <div class="step-number">1</div>
              <h3>使用AI生成PRD</h3>
              <p>通过量化帮工具生成产品需求文档，集思广益，提出功能创意。</p>
            </div>
            
            <div class="workflow-card">
              <div class="step-number">2</div>
              <h3>快速原型开发</h3>
              <p>利用AI工具将PRD快速转化为可交互的原型。</p>
            </div>
            
            <div class="workflow-card">
              <div class="step-number">3</div>
              <h3>早期风险解决</h3>
              <p>在开发前识别并解决关键风险点，避免后期高成本修改。</p>
            </div>
            
            <div class="workflow-card">
              <div class="step-number">4</div>
              <h3>迭代优化</h3>
              <p>根据用户反馈和数据分析，持续优化产品设计。</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 传统挑战部分 -->
      <section class="challenges-section">
        <div class="content-container">
          <h2 class="section-title">传统产品管理的挑战</h2>
          <div class="challenges-container">
            <ul class="challenges-list">
              <li><strong>风险缓解：</strong>许多团队未能尽早解决风险，导致开发后期需要付出高昂的代价来纠正问题。</li>
              <li><strong>获取反馈：</strong>由于存在层层中介，大型组织中的PM通常很难直接听取用户的意见。</li>
              <li><strong>数据限制：</strong>获取可靠、可操作的指标来指导决策可能是一个重大障碍。</li>
              <li><strong>团队动力：</strong>项目经理、设计师和工程师之间的高效协作至关重要，但通常很难实现。</li>
            </ul>
          </div>
        </div>
      </section>

      <!-- CTA部分 -->
      <section class="cta-section" style="background-image: url('https://images.unsplash.com/photo-1553877522-43269d4ea984?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')">
        <div class="cta-overlay">
          <div class="cta-content">
            <h2>开启AI驱动的产品管理</h2>
            <p>
              移动和Web应用在日常生活中变得极其重要，它们塑造了我们沟通、工作以及与世界互动的方式。
              通过量化帮等AI工具，产品经理可以更快地将创意转化为现实，更有效地识别和解决风险，
              最终打造出更符合用户需求的产品。
            </p>
            <div class="button-group">
              <a href="#" class="btn-primary">立即开始</a>
              <a href="#" class="btn-secondary">了解更多</a>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer>
      <div class="footer-content">
        <div class="footer-logo">
          <span>产品管理革命</span>
        </div>
        <div class="footer-links">
          <div class="link-group">
            <h4>产品</h4>
            <a href="#">功能</a>
            <a href="#">集成</a>
            <a href="#">价格</a>
            <a href="#">文档</a>
          </div>
          <div class="link-group">
            <h4>公司</h4>
            <a href="#">关于我们</a>
            <a href="#">博客</a>
            <a href="#">职业</a>
            <a href="#">客户</a>
          </div>
          <div class="link-group">
            <h4>资源</h4>
            <a href="#">社区</a>
            <a href="#">联系我们</a>
            <a href="#">隐私政策</a>
            <a href="#">服务条款</a>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <p>© 2024 产品管理革命 - 所有权利保留</p>
      </div>
    </footer>
  </div>
</template>

<style>
:root {
  --color-primary: #1a73e8;
  --color-primary-light: #e8f0fe;
  --color-text: #333333;
  --color-text-light: #555555;
  --color-subtext: #666666;
  --color-background: #ffffff;
  --color-neutral-50: #f5f5f5;
  --color-neutral-100: #e0e0e0;
  --color-neutral-border: #eeeeee;
  --font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --border-radius: 8px;
  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-background);
}

.bg-default-background {
  background-color: var(--color-background);
}

/* 英雄横幅 */
.hero-banner {
  height: 500px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

header {
  text-align: center;
  z-index: 1;
  padding: 2rem;
}

h1 {
  font-size: 3rem;
  color: #fff;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* 主要内容 */
section {
  padding: 4rem 1.5rem;
}

.content-container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-tag {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  display: block;
  text-align: center;
  margin-bottom: 1rem;
}

.section-title {
  font-size: 36px;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 1.5rem;
  letter-spacing: -0.03em;
}

.section-description {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-light);
  text-align: center;
  max-width: 768px;
  margin: 0 auto 2.5rem;
}

.lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-light);
  text-align: center;
  max-width: 768px;
  margin: 0 auto;
}

/* 分隔线 */
.divider {
  height: 1px;
  background-color: var(--color-neutral-border);
  max-width: 768px;
  margin: 0 auto;
}

/* 卡片网格 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.feature-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid var(--color-neutral-border);
  background-color: var(--color-neutral-50);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-image {
  height: 160px;
  width: 100%;
  object-fit: cover;
}

.card-content {
  padding: 1.5rem;
  display: flex;
  gap: 0.75rem;
}

.card-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-text {
  flex: 1;
}

.card-text h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.card-text p {
  font-size: 14px;
  color: var(--color-subtext);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* 工作流卡片 */
.workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.workflow-card {
  padding: 1.5rem;
  border-radius: var(--border-radius);
  background-color: var(--color-neutral-50);
  box-shadow: var(--box-shadow);
  position: relative;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background-color: var(--color-primary);
  color: white;
  border-radius: 50%;
  font-weight: bold;
  margin-bottom: 1rem;
}

.workflow-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.workflow-card p {
  font-size: 14px;
  color: var(--color-subtext);
  line-height: 1.5;
}

/* 挑战部分 */
.challenges-container {
  background-color: #fff8e1;
  border-radius: var(--border-radius);
  padding: 2rem;
  max-width: 768px;
  margin: 0 auto;
  box-shadow: var(--box-shadow);
}

.challenges-list {
  list-style-position: inside;
}

.challenges-list li {
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* CTA部分 */
.cta-section {
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 0;
}

.cta-overlay {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 4rem 2rem;
}

.cta-content {
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

.cta-content h2 {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 1.5rem;
  letter-spacing: -0.03em;
}

.cta-content p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.button-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.btn-primary, .btn-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius);
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary {
  background-color: var(--color-primary);
  color: white;
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-primary:hover, .btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 页脚 */
footer {
  background-color: var(--color-neutral-50);
  padding: 4rem 2rem 2rem;
  border-top: 1px solid var(--color-neutral-border);
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  gap: 3rem;
}

.footer-logo {
  flex: 1;
  min-width: 200px;
}

.footer-logo span {
  font-size: 18px;
  font-weight: 500;
}

.footer-links {
  flex: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.link-group {
  flex: 1;
  min-width: 140px;
}

.link-group h4 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 1rem;
}

.link-group a {
  display: block;
  color: var(--color-subtext);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.link-group a:hover {
  color: var(--color-primary);
}

.footer-bottom {
  max-width: 1200px;
  margin: 2rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--color-neutral-border);
  text-align: center;
  color: var(--color-subtext);
  font-size: 14px;
}

.photo-credits {
  margin-top: 0.5rem;
  font-size: 12px;
}

.photo-credits a {
  color: var(--color-primary);
  text-decoration: none;
}

.photo-credits a:hover {
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  
  .section-title {
    font-size: 28px;
  }
  
  .hero-banner {
    height: 300px;
  }
  
  .card-grid, .workflow-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-content {
    flex-direction: column;
    gap: 2rem;
  }
  
  .footer-links {
    flex-direction: column;
    gap: 2rem;
  }
  
  .button-group {
    flex-direction: column;
    align-items: center;
  }
}
</style>
